<template>
  <div class="min-h-screen">
    <!-- 英雄区域 - 增强版 -->
    <section class="relative overflow-hidden bg-gradient-to-br from-blue-200 via-indigo-100 to-purple-200 dark:from-gray-900 dark:via-gray-950 dark:to-gray-800">
      <!-- Beta标签 - 右上角 -->
      <div class="absolute top-6 right-6 z-50">
        <div class="relative">
          <div class="inline-flex items-center px-4 py-2 rounded-full font-bold bg-gradient-to-r from-orange-400 to-red-500 text-white shadow-xl  border-white/50 backdrop-blur-sm">
            <span class="relative z-10">Beta探索版</span>
            <!-- 光圈效果 -->
            <!-- <div class="absolute inset-0 rounded-full bg-gradient-to-r from-orange-400 to-red-500 opacity-75 animate-ping"></div> -->
          </div>
        </div>
      </div>
      
      <!-- 背景粒子动画 -->
      <div class="absolute inset-0 overflow-hidden">
        <div id="particles-js" class="absolute inset-0"></div>
      </div>
      
      <!-- 动态光效 -->
      <div class="absolute top-20 -left-24 w-72 h-72 bg-blue-200 rounded-full mix-blend-multiply filter blur-3xl opacity-8 animate-blob"></div>
      <div class="absolute top-40 -right-24 w-72 h-72 bg-purple-200 rounded-full mix-blend-multiply filter blur-3xl opacity-8 animate-blob animation-delay-2000"></div>
      <div class="absolute -bottom-8 left-40 w-72 h-72 bg-cyan-200 rounded-full mix-blend-multiply filter blur-3xl opacity-8 animate-blob animation-delay-4000"></div>
      
      <div class="container relative z-10 mx-auto px-4 py-20 md:py-32">
        <div class="max-w-4xl mx-auto text-center">
          <div class="glitch-wrapper mb-6">
            <h1 class="text-5xl md:text-7xl font-bold text-gray-800 dark:text-blue-200 glitch relative inline-block">
              MCP创客广场
            </h1>
          </div>
          <p class="text-xl md:text-2xl text-gray-700 dark:text-blue-100 mb-4 opacity-90">
            探索<span class="text-purple-600 dark:text-purple-400 font-semibold">MCP协议</span>的无限可能
          </p>
          <p class="text-lg text-gray-600 dark:text-gray-300 mb-12 max-w-2xl mx-auto">
            收集内外网MCP Server列表，让您快速找到合适的MCP，提升开发效率
          </p>
          <div class="flex flex-col sm:flex-row gap-6 justify-center">
            <router-link to="/servers?filter=community" class="px-8 py-3 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 text-white font-semibold transform hover:scale-105 transition duration-300 shadow-md hover:shadow-blue-400/20 relative overflow-hidden group">
              <span class="absolute top-0 left-0 w-full h-full bg-white/10 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700"></span>
              开源 MCP 
            </router-link>
            <router-link to="/servers?filter=internal" class="px-8 py-3 rounded-lg bg-gradient-to-r from-red-500 to-pink-500 text-white font-semibold transform hover:scale-105 transition duration-300 shadow-md hover:shadow-red-400/20 relative overflow-hidden group">
              <span class="absolute top-0 left-0 w-full h-full bg-white/10 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700"></span>
              内部 MCP 
            </router-link>
            <button 
              @click="showBetaModal('register')"
              class="px-8 py-3 rounded-lg bg-gradient-to-r from-green-600 to-emerald-500 text-white font-semibold transform hover:scale-105 transition duration-300 shadow-md hover:shadow-green-400/20 relative overflow-hidden group"
            >
              <span class="absolute top-0 left-0 w-full h-full bg-white/10 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700"></span>
              注册 MCP
            </button>
          </div>
        </div>
      </div>
      <!-- <div class="absolute bottom-0 left-0 w-full h-16 bg-gradient-to-t from-gray-100 dark:from-gray-900 to-transparent"></div> -->
    </section>

    <!-- 功能区域 - 增强版 -->
    <section class="py-10 bg-gray-100 dark:bg-gray-900 relative overflow-hidden">      
      <div class="container mx-auto px-4 relative z-10">        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
          <div class="feature-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-md transition-all duration-300 transform hover:-translate-y-3 border border-gray-200 dark:border-gray-700 relative group">
            <div class="absolute -inset-px bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm -z-10"></div>
            <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600 dark:text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                <path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5z" />
              </svg>
            </div>
            <h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">MCP Server 列表</h3>
            <p class="text-gray-600 dark:text-gray-300 mb-4">收集外部和华为内部的MCP Server，让您快速找到合适的MCP 。</p>
            <router-link to="/servers?filter=all" class="inline-flex items-center text-blue-600 dark:text-blue-400 font-medium">
              <span>开始浏览</span>
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </router-link>
          </div>
          
          <div class="feature-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-md transition-all duration-300 transform hover:-translate-y-3 border border-gray-200 dark:border-gray-700 relative group">
            <div class="absolute -inset-px bg-gradient-to-r from-purple-600 to-cyan-600 rounded-xl opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm -z-10"></div>
            <div class="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600 dark:text-purple-400" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
            <h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">MCP共建</h3>
            <p class="text-gray-600 dark:text-gray-300 mb-4">支持用户注册MCP Server，添加自定义标签，共建MCP市场。</p>
            <button 
              @click="showBetaModal('register')"
              class="inline-flex items-center text-purple-600 dark:text-purple-400 font-medium"
            >
              <span>注册MCP</span>
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </button>
          </div>
          
          <!-- <div class="feature-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-md transition-all duration-300 transform hover:-translate-y-3 border border-gray-200 dark:border-gray-700 relative group">
            <div class="absolute -inset-px bg-gradient-to-r from-green-600 to-blue-600 rounded-xl opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-sm -z-10"></div>
            <div class="w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600 dark:text-green-400" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" />
              </svg>
            </div>
            <h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">API集成</h3>
            <p class="text-gray-600 dark:text-gray-300 mb-4">提供完善的API接口，支持第三方服务集成MCP市场，助力开发流程更高效。</p>
            <button 
              @click="showBetaModal('api')"
              class="inline-flex items-center text-green-600 dark:text-green-400 font-medium"
            >
              <span>查看API文档</span>
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </button>
          </div> -->
        </div>
      </div>
    </section>

    <!-- 最新更新 - 增强版 -->
    <section class="py-10 bg-white dark:bg-gray-800 relative">
      <!-- 装饰图形 -->
      <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <svg class="absolute right-0 top-0 h-40 w-40 text-blue-500/10 dark:text-blue-300/5" viewBox="0 0 100 100" fill="currentColor">
          <path d="M0,0 L100,0 L100,100 L50,50 Z"></path>
        </svg>
        <svg class="absolute left-0 bottom-0 h-40 w-40 text-purple-500/10 dark:text-purple-300/5" viewBox="0 0 100 100" fill="currentColor">
          <path d="M0,100 L0,0 L100,0 L50,50 Z"></path>
        </svg>
      </div>
      
      <div class="container mx-auto px-4 relative z-10">
        <div class="flex flex-col md:flex-row md:items-center justify-between mb-12">
          <div>
            <h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-2">热门MCP</h2>
          </div>
          <router-link 
            to="/servers?filter=hot" 
            class="mt-4 md:mt-0 inline-flex items-center px-6 py-2 text-blue-600 dark:text-blue-400 border border-blue-600 dark:border-blue-400 rounded-lg hover:bg-blue-600 hover:text-white dark:hover:bg-blue-800 transition duration-300"
          >
            查看全部热门MCP Server 
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </router-link>
        </div>
        
        <div class="mx-auto">
          <div v-if="loading" class="flex justify-center py-20">
            <div class="hexagon-loader">
              <div class="hexagon"></div>
            </div>
          </div>
          <div v-else-if="error" class="text-center py-16 px-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-red-500 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
            <p class="text-lg font-medium text-red-800 dark:text-red-200">{{ error }}</p>
          </div>
          <div v-else-if="latestServers.length === 0" class="text-center py-16 px-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
            </svg>
            <p class="text-lg font-medium text-gray-600 dark:text-gray-300">暂无 Server 数据</p>
          </div>
          <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <ServerCard 
              v-for="server in latestServers" 
              :key="server.id" 
              :server="server"
            />
          </div>
        </div>
        
        <div class="mt-8 text-center">
          <router-link 
            to="/servers?filter=all" 
            class="inline-block px-6 py-2 text-blue-600 dark:text-blue-400 border border-blue-600 dark:border-blue-400 rounded-lg hover:bg-blue-600 hover:text-white dark:hover:bg-blue-800 transition duration-300"
          >
            查看全部 Server 
          </router-link>
        </div>
      </div>
    </section>

    <!-- Beta 提示模态框 -->
    <div v-if="showModal" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
      <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" @click="closeModal"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full p-6">
          <div class="absolute top-0 right-0 pt-4 pr-4">
            <button @click="closeModal" class="text-gray-400 hover:text-gray-500 focus:outline-none">
              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          <div class="sm:flex sm:items-start">
            <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
              <svg class="h-6 w-6 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="modal-title">
                {{ modalTitle }}
              </h3>
              <div class="mt-2">
                <p class="text-sm text-gray-500 dark:text-gray-300">
                  {{ modalMessage }}
                </p>
              </div>
            </div>
          </div>
          <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
            <button 
              type="button" 
              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm"
              @click="closeModal"
            >
              我知道了
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import axios from 'axios'
import ServerCard from '@/components/server/ServerCard.vue'

interface Server {
  id: number
  name: string
  description: string
  isInternal: boolean
  provider?: string
  category?: string
  category_name?: string
  tags: string[]
  github?: string
  updated_at?: string
  is_internal: boolean
  description_cn?: string
}

const latestServers = ref<Server[]>([])
const loading = ref(true)
const error = ref<string | null>(null)

// 模态框状态
const showModal = ref(false)
const modalTitle = ref('')
const modalMessage = ref('')

// 显示模态框
const showBetaModal = (type: 'register' | 'api') => {
  if (type === 'register') {
    modalTitle.value = '功能暂未开放'
    modalMessage.value = '当前处于beta阶段，暂不开放注册功能，如果想注册MCP Server请联系阮新宇。'
  } else if (type === 'api') {
    modalTitle.value = 'API接口暂未开放'
    modalMessage.value = '当前处于beta阶段，暂不提供开放API，如果需要调用API集成，请联系阮新宇。'
  }
  showModal.value = true
}

// 关闭模态框
const closeModal = () => {
  showModal.value = false
}

const fetchLatestServers = async () => {
  loading.value = true
  error.value = null
  
  try {
    // 这里应该根据实际API地址调整
    const response = await axios.get('/api/servers', {
      params: {
        limit: 20,
        tags: "热门",
        sort: 'created_at:desc'
      }
    })
    latestServers.value = response.data.results
  } catch (err) {
    console.error('获取最新 Server 失败:', err)
    error.value = '无法加载最新 Server ，请稍后再试'
    // 开发环境下使用一些模拟数据
    if (import.meta.env.DEV) {
      latestServers.value = [
        { id: 1, name: 'MCP-Demo-Server', description: '演示用MCP Server ，适合初学者学习，提供丰富的示例和详细的文档', isInternal: false },
        { id: 2, name: 'Internal-MCP-Pro', description: '企业级MCP Server ，高性能计算支持，专为大规模数据协作设计', isInternal: true },
        { id: 3, name: 'MCP-Research', description: '用于学术研究的MCP Server ，支持最新的密码学算法和协议', isInternal: false },
        { id: 4, name: 'MCP-Financial', description: '为金融行业定制的MCP Server ，高安全性，合规性保障', isInternal: false },
        { id: 5, name: 'Enterprise-MCP-Analytics', description: '企业数据分析MCP Server ，支持跨组织数据联合分析', isInternal: true },
        { id: 6, name: 'MCP-Healthcare', description: '医疗健康行业MCP Server ，满足HIPAA合规要求', isInternal: false },
      ]
      error.value = null
    }
  } finally {
    loading.value = false
  }
}

// 加载粒子效果
const initParticles = () => {
  // 如果在浏览器环境，动态加载粒子库
  if (typeof window !== 'undefined') {
    import('particles.js').then(() => {
      // @ts-ignore - particles.js会添加全局变量
      window.particlesJS('particles-js', {
        particles: {
          number: { value: 80, density: { enable: true, value_area: 800 } },
          color: { value: '#ffffff' },
          shape: { type: 'circle', stroke: { width: 0, color: '#000000' }, polygon: { nb_sides: 5 } },
          opacity: { value: 0.25, random: false, anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false } },
          size: { value: 3, random: true, anim: { enable: false, speed: 40, size_min: 0.1, sync: false } },
          line_linked: { enable: true, distance: 150, color: '#ffffff', opacity: 0.1, width: 1 },
          move: { enable: true, speed: 2, direction: 'none', random: false, straight: false, out_mode: 'out', bounce: false, attract: { enable: false, rotateX: 600, rotateY: 1200 } }
        },
        interactivity: {
          detect_on: 'canvas',
          events: { onhover: { enable: true, mode: 'grab' }, onclick: { enable: true, mode: 'push' }, resize: true },
          modes: { grab: { distance: 140, line_linked: { opacity: 0.3 } }, push: { particles_nb: 4 } }
        },
        retina_detect: true
      })
    }).catch(err => console.warn('粒子效果加载失败:', err))
  }
}

onMounted(() => {
  fetchLatestServers()
  // initParticles()
})

onBeforeUnmount(() => {
  // 清理粒子效果
  if (typeof window !== 'undefined' && window.pJSDom && window.pJSDom.length) {
    window.pJSDom[0].pJS.fn.vendors.destroypJS()
    window.pJSDom = []
  }
})
</script>

<style scoped>
/* 粒子容器 */
#particles-js {
  width: 100%;
  height: 100%;
}

/* 立方体动画 */
.cube-wrapper {
  perspective: 800px;
  margin: 0 auto;
  width: 120px;
  height: 120px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 16s infinite linear;
}

.cube-face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 1.5rem;
  text-shadow: 0 0 10px rgba(0,0,0,0.5);
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  background-color: rgba(30, 64, 175, 0.6);
  border-radius: 4px;
}

.front { transform: translateZ(60px); }
.back { transform: rotateY(180deg) translateZ(60px); }
.right { transform: rotateY(90deg) translateZ(60px); }
.left { transform: rotateY(-90deg) translateZ(60px); }
.top { transform: rotateX(90deg) translateZ(60px); }
.bottom { transform: rotateX(-90deg) translateZ(60px); }

@keyframes rotate {
  0% { transform: rotateX(0) rotateY(0); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* 六边形加载动画 */
.hexagon-loader {
  position: relative;
  width: 60px;
  height: 60px;
}

.hexagon {
  position: absolute;
  width: 60px;
  height: 34.64px;
  background-color: #4f46e5;
  margin: 17.32px 0;
  animation: hexagon-animation 1.5s infinite ease-in-out;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 17.32px solid #4f46e5;
}

.hexagon:after {
  top: 100%;
  border-top: 17.32px solid #4f46e5;
}

@keyframes hexagon-animation {
  0% { transform: rotate(0); opacity: 0.7; }
  50% { transform: rotate(180deg); opacity: 1; }
  100% { transform: rotate(360deg); opacity: 0.7; }
}

/* Blob动画 */
.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}

/* 故障文字效果 */
.glitch-wrapper {
  position: relative;
  display: inline-block;
}

.glitch {
  position: relative;
  letter-spacing: 2px;
  /* animation: glitch-text 4s infinite; */
}

.glitch > span {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
}

.glitch > span:first-child {
  animation: glitch-text-left 4s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  transform: translate(-2px, -2px);
  opacity: 0.8;
}

.glitch > span:last-child {
  animation: glitch-text-right 4s infinite;
  clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%);
  transform: translate(2px, 2px);
  opacity: 0.8;
}

@keyframes glitch-text {
  0% { text-shadow: 0.05em 0 0 #00fffc, -0.05em -0.025em 0 #fc00ff; }
  15% { text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.025em 0 #fc00ff; }
  50% { text-shadow: 0.05em 0.05em 0 #00fffc, 0.05em 0 0 #fc00ff; }
  100% { text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.05em 0 #fc00ff; }
}

@keyframes glitch-text-left {
  0% { transform: translate(-2px, -2px); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(-2px, -2px); }
}

@keyframes glitch-text-right {
  0% { transform: translate(2px, 2px); }
  20% { transform: translate(4px, -2px); }
  40% { transform: translate(2px, 2px); }
  60% { transform: translate(-2px, -2px); }
  80% { transform: translate(-2px, 2px); }
  100% { transform: translate(2px, 2px); }
}

/* 卡片悬停效果 */
.feature-card, .server-card {
  isolation: isolate;
  transition: all 0.3s ease;
}

.feature-card:hover {
  box-shadow: 0 10px 20px rgba(79, 70, 229, 0.1);
  transform: translateY(-6px);
}

.feature-card:hover h3 {
  color: #4f46e5;
}

.dark .feature-card:hover h3 {
  color: #818cf8;
}

.feature-card:hover p {
  color: #374151;
}

.dark .feature-card:hover p {
  color: #e5e7eb;
}

.server-card:hover {
  box-shadow: 0 10px 20px rgba(79, 70, 229, 0.1);
  transform: translateY(-6px);
}

.server-card:hover h3 {
  color: #4f46e5;
}

.dark .server-card:hover h3 {
  color: #818cf8;
}

.server-card:hover p {
  color: #374151;
}

.dark .server-card:hover p {
  color: #e5e7eb;
}

/* 渐变背景 */
.gradient-primary-to-secondary {
  background: linear-gradient(135deg, #4f46e5 0%, #7e22ce 100%);
}

.bg-gradient-radial {
  background-image: radial-gradient(var(--tw-gradient-from) 0%, var(--tw-gradient-to) 70%);
}

/* 多行文本截断 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style> 